<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2020/10/6
  Time: 19:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>发布动态</title>
    <style type="text/css" rel="stylesheet">
        .Allcontent{
            width: 800px;
            height: 500px;
            margin: 0 auto;
            padding-top: 50px;
            box-sizing: border-box;
        }
        .Allcontent .cont{
            width: 600px;
            margin: 0 auto;

        }
        .Allcontent .fabu{
            width: 600px;
            height: 30px;
            margin: 0 auto;
            padding: 0;
            border: 2px solid #1682c2;
            background: #1682c2;
            color: white;
            font-size: 16px;
            letter-spacing: 2px;
            line-height: 26px;
            cursor: pointer;
        }
        .Allcontent .fabu:hover{
            background: none;
            color: red;
            border: 2px solid red;
        }
        textarea{
            resize: none;
            width: 600px;
            height: 300px;
            margin: 0 auto;
            padding: 0;
            border: 2px solid #1682c2;
            border-bottom: none;
            box-sizing: border-box;
            text-indent: 20px;
            padding: 10px;
            line-height: 1.5;
        }
        .Allcontent .cont .cont-title{
            width: 600px;
            height: 50px;
            line-height: 50px;
            border: 2px solid #1682c2;
            border-bottom: none;
            box-sizing: border-box;
            text-align: center;
            font-size: 16px;
        }
    </style>
    <script src="/WebContent/JQuery/jquery-3.4.1.js" type="text/javascript"></script>
</head>
<body>
      <article class="Allcontent">
           <div class="cont">
               <input class="cont-title" placeholder="请输入标题">
               <textarea class="content" name="content" placeholder="请输入内容..."></textarea>
               <button class="fabu">发布</button>
           </div>
      <script>
          $(document).ready(function () {

               $(".fabu").click(function () {
                   //获取数据
                   var title = $(".cont-title").val();
                   var content = $(".content").val();
                   if(title != '' && content !=''){
                       var url = "czlx=tj&title="+title+"&content="+content;
                       //创建异步请求对象
                       var xmlHttpRequest = new XMLHttpRequest();
                       //绑定监听器
                       xmlHttpRequest.onreadystatechange = function () {
                           //异步请求工作状态为4且状态码为200时
                           if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
                               var data = xmlHttpRequest.responseText;
                               alert(data);
                               window.location.href = "/artdataDML?qqlx=cxqb";
                           }
                       }
                       //初始化异步请求对象
                       xmlHttpRequest.open("post","/artdataDML?"+url,true);
                       xmlHttpRequest.send();


                   }else{
                       alert("标题或内容不能为空！")
                   }

               })
          })
      </script>
      </article>
</body>
</html>